<header class="mb-4">
  <h1 class="crayons-title mb-0">Navigation Links</h1>
  <p class="color-secondary">Configure the left sidebar navigation links that will appear at <a href="<%= app_url %>" class="c-link c-link--branded"><%= app_url %></a>.</p>
</header>

<div class="crayons-card p-6 flex flex-col gap-6">
  <%= render "add_navigation_link_modal" %>

  <div>
    <h2 class="crayons-subtitle-1">Main navigation</h2>
    <ul class="ml-0">
      <% @default_nav_links.each_with_index do |link, index| %>
        <li class="flex pt-4 items-center">
          <div class="mr-5 navigation-link-position"><%= link[:position] %></div>
          <div class="admin-navigation-links">
            <a href="<%= link[:url] %>" class="crayons-link crayons-link--block bg-base-20">
              <div class="crayons-icon crayons-icon--default">
                  <%= link[:icon].html_safe %>
              </div>
              <%= link[:name] %><span class="js-reading-list-count c-indicator"></span>
            </a>
          </div>

          <div class="flex items-center mx-5">
            <div class="mx-3">
              <%= render partial: "edit_navigation_link_modal", locals: { link: link } %>
            </div>
            <div class="mx-3">
              <%= link_to "Delete", admin_navigation_link_path(link), data: { confirm: "Are you sure?" }, method: :delete, class: "color-accent-danger" %>
            </div>
          </div>
        </li>
      <% end %>
    </ul>
  </div>

  <div>
    <h2 class="crayons-subtitle-1">Other</h2>
    <ul class="ml-0">
      <% @other_nav_links.each_with_index do |link, index| %>
        <li class="flex pt-4 items-center">
          <div class="mr-5 navigation-link-position"><%= link[:position] %></div>
          <div class="admin-navigation-links">
            <a href="<%= link[:url] %>" class="crayons-link crayons-link--block bg-base-20">
              <div class="crayons-icon crayons-icon--default">
                  <%= link[:icon].html_safe %>
              </div>
              <%= link[:name] %><span class="js-reading-list-count c-indicator"></span>
            </a>
          </div>

          <div class="flex items-center mx-5">
            <div class="mx-3">
              <%= render partial: "edit_navigation_link_modal", locals: { link: link } %>
            </div>
            <div class="mx-3">
              <%= link_to "Delete", admin_navigation_link_path(link), data: { confirm: "Are you sure?" }, method: :delete, class: "color-accent-danger" %>
            </div>
          </div>
        </li>
      <% end %>
    </ul>
  </div>
</div>
